<template>
  <el-card class="box-card" shadow="hover" v-if="show" style="width: 100%">
    <span><el-button class="button" style="float: right" @click="show = false" text><el-icon ><Close /></el-icon></el-button></span>
    <el-row justify="center">
      <div :id="id" :class="className" :style="{ height, width }" />
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import type { EChartsOption } from 'echarts'
import * as echarts from 'echarts';
import {Close} from "@element-plus/icons-vue";
import {onMounted, nextTick, ref} from "vue";
import {parseTime} from "@/utils/timeUtils";
import {dateMap} from "@/data/service/logAnalysisService";

const props = defineProps({
  id: {
    type: String,
    default: 'calendar heatmap',
  },
  className: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '800px',
  },
  height: {
    type: String,
    default: '250px',
  },
  value:{
    type: Object,
    default: {}
  }
});

const show = ref(true)

const startDate = ref(parseTime(new Date().getTime(), '{y}-{m}-{d}')||'')
const timeRange = {
  min: parseTime(new Date(<string>startDate.value).getTime() - 1000*60*60*24*365, '{y}-{m}-{d}')||new Date().getFullYear().toString(),
  max: parseTime(new Date(<string>startDate.value).getTime() , '{y}-{m}-{d}')||new Date().getFullYear().toString(),
}

const option: EChartsOption = {
  tooltip: {
    show: true,
    formatter: (params:any) => {
      const colorBlock = '<span style="color: '+params.color+'">●</span>'
      const date = params.value[0]
      const value = params.value[1]
      return date + '<br/>' + colorBlock +value
    }
  },
  toolbox: {
    show: true,
    orient: "vertical",
    left: "left",
    top: "bottom",
    feature: {
      saveAsImage: { show: true },  // 保存图表
    },
  },
  visualMap: {
    type: 'piecewise',
    orient: 'horizontal',
    left: 'center',
    bottom:10,
    pieces: [
      {
        min:0,
        max:5,
        label: '5<',
        color: '#d9ecff',
      },
      {
        min:5,
        max:10,
        label: '5-10',
        color: '#c6e2ff',
      },
      {
        min:10,
        max:20,
        label: '10-20',
        color: '#a0cfff',
      },
      {
        min:20,
        max:50,
        label: '20-50',
        color: '#79bbff',
      },
      {
        min:50,
        max:100,
        label: '50-100',
        color: '#337ecc',
      },
      {
        min:100,
        label: '>100',
        color: '#134b85',
      },
    ],
  },
  calendar: {
    top: 90,
    left: 30,
    right: 30,
    cellSize: ['auto', 13],
    range: [timeRange.min, timeRange.max],
    itemStyle: {
      borderWidth: 0.5
    },
    yearLabel: { show: false }
  },
  series: {
    type: 'heatmap',
    coordinateSystem: 'calendar',
    data: [...dateMap.entries()]
  }
};

function initChart(){
  let chartDom = document.getElementById(props.id)!;
  let myChart = echarts.init(chartDom);
  myChart.setOption(option)
}
// watch(props.test, (test)=>{
//   console.log(test)
// })

onMounted(()=>{
  nextTick(()=>{
    initChart()
  })
})
</script>

<style scoped>

</style>